<template>
  <div>
    <div>
      <FormPanel ref="formPanel" :list="formList" :cols="1" :labelWidth="110" :formType="type" :isSubmitBtn="false" @formChange="formChangeHandle" />
    </div>
    <div>
      <FilterTable
        v-if="visible"
        ref="table"
        columnsRef="hxrjkxxbjTable"
        height="200"
        :columns="columns"
        :fetchapi="fetchApi"
        :params="fetchParams"
        :datakey="'rows'"
        :onColumnsChange="
          columns => {
            this.columns = columns;
          }
        "
        :isSelectColumn="false"
      ></FilterTable>
      <BaseDialog title="车主车辆信息查询" :visible.sync="vehicleInfoVisibie" destroyOnClose>
        <SearchVehicleInfo @saveDialog="setOwnerInfo" @closeDialog="vehicleInfoVisibie = false" />
      </BaseDialog>
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <el-button v-if="type !== 'show'" type="primary" @click="beforeSave">{{ btnText }}</el-button>
      <el-button :disabled="btn1" @click="showHistory">历史信息</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { addVehicleMonitor, editVehicleMonitor, getMonitorHistory } from '@/api/customerRepair/monitor/monitorInfo';
import { now } from 'moment';
import { prototype } from 'events';
import SearchVehicleInfo from './SearchVehicleInfo';
import moment from 'moment';

export default {
  name: 'MonitorVehicleInfo',
  components: {
    SearchVehicleInfo
  },
  mixins: [dictionary],
  props: {
    type: {
      type: String,
      default: 'add'
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    this.conf = { add: '保 存', edit: '修 改' };
    this.saveData = null;
    var checkVin = (rule, value, callBack) => {};
    return {
      formList: this.createFormList(),
      nowTime: new Date(),
      columns: this.createTableColumns(),
      fetchApi: getMonitorHistory,
      fetchParams: {},
      visible: false,
      vehicleInfoVisibie: false
    };
  },
  computed: {
    btnText() {
      return this.conf[this.type];
    }
  },
  created() {
    this.init();
    this.btn1 = true;
  },
  mounted() {
    if (this.type === 'add') {
      this.formList[this.findIndex(this.formList, 'foundDate')].initialValue = this.nowTime;
    }
    // console.log(this.rowData,"rowData");
  },
  methods: {
    findIndex(arr, fieldName) {
      // console.log(arr);
      let indexR = -1;
      arr.forEach((x, index) => {
        if (x.fieldName == fieldName) {
          // console.log(x);
          // console.log(index);
          indexR = index;
        }
      });
      return indexR;
    },
    init() {
      if (this.type === 'edit') {
        // 更新接口需要的记录 ID
        this.recordId = this.rowData.monitorId;
        this.formList.forEach(x => {
          x.initialValue = this.rowData[x.fieldName];
        });
        if (isNaN(this.rowData.salesDateBegin) && !isNaN(Date.parse(this.rowData.salesDateBegin)) && isNaN(this.rowData.salesDateEnd) && !isNaN(Date.parse(this.rowData.salesDateEnd))) {
          this.formList[this.findIndex(this.formList, 'salesDateBegin|salesDateEnd')].initialValue = [
            moment(this.rowData.salesDateBegin).format('YYYY-MM-DD HH-mm'),
            moment(this.rowData.salesDateEnd).format('YYYY-MM-DD HH-mm')
          ];
        }
        this.formList[this.findIndex(this.formList, 'beginDate|endDate')].initialValue = [
          moment(this.rowData.beginDate).format('YYYY-MM-DD HH-mm'),
          moment(this.rowData.endDate).format('YYYY-MM-DD HH-mm')
        ];
      }
      // console.log(this.formList);
    },
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          placeholder: '请输入...',
          unitRender: this.searchVehicle,
          readonly: true,
          rules: [{ required: true, message: '请输入车牌号', trigger: 'blur' }]
        },
        // {
        //   type: 'INPUT',
        //   label: '车主编号',
        //   fieldName: 'ownerNo',
        //   placeholder: '请选择...',
        //   unitRender: this.searchVehicle,
        //   readonly: true,
        //   rules: [{ required: true, message: '请输入车主编号', trigger: 'blur' }]
        // },
        // {
        //   type: 'INPUT',
        //   label: '发动机号',
        //   fieldName: 'engineNo',
        //   placeholder: '请输入...'
        // },
        // {
        //   type: 'INPUT',
        //   label: '车主',
        //   fieldName: 'ownerName',
        //   placeholder: '请输入...'
        // },
        // {
        //   type: 'RANGE_DATE',
        //   label: '销售日期',
        //   fieldName: 'salesDateBegin|salesDateEnd',
        //   valueFormat: 'yyyy-MM-dd'
        // },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '请输入...',
          rules: [
            { required: true, message: '请输入VIN', trigger: 'blur' },
            { pattern: /^(\w){17,17}$/, message: '请输入正确的VIN' }
          ]
        },
        {
          type: 'DATE',
          label: '新增日期',
          fieldName: 'foundDate',
          valueFormat: 'yyyy-MM-dd',
          offsetRightCols: 1,
          disabled: true
        },
        // {
        //   type: 'INPUT',
        //   label: '最低消费额',
        //   fieldName: 'ownerConsumeAmountMin',
        //   placeholder: '请输入...'
        // },
        // {
        //   type: 'INPUT',
        //   label: '最高消费额',
        //   fieldName: 'ownerConsumeAmountMax',
        //   placeholder: '请输入...'
        // },
        {
          type: 'CHECKBOX',
          label: '预约提醒',
          fieldName: 'bookingTag',
          options: {
            trueValue: 10041001,
            falseValue: 10041002
          }
        },
        {
          type: 'CHECKBOX',
          label: '接待提醒',
          fieldName: 'repairOrderTag',
          options: {
            trueValue: 10041001,
            falseValue: 10041002
          }
        },
        {
          type: 'CHECKBOX',
          label: '结算提醒',
          fieldName: 'balanceTag',
          options: {
            trueValue: 10041001,
            falseValue: 10041002
          }
        },
        {
          type: 'RANGE_DATE',
          label: '有效期',
          fieldName: 'beginDate|endDate',
          valueFormat: 'yyyy-MM-dd',
          rules: [{ required: true, message: '请输入有效期', trigger: 'blur' }]
        },
        {
          type: 'TEXT_AREA',
          label: '提示信息',
          fieldName: 'message',
          placeholder: '请输入...',
          // selfCols: 2,
          rules: [{ required: true, message: '请输入提示信息', trigger: 'blur' }]
        }
      ];
    },
    createTableColumns: function() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          sorter: true,
          render: (props, h) => {
            return <span> {props.row.index + 1} </span>;
          }
        },
        {
          title: '接待提醒',
          dataIndex: 'repairOrderTag',
          sorter: true,
          filter: true,
          filterType: 'input',
          align: 'center',
          render: (props, h) => {
            if (props.row.repairOrderTag == 10041001) return <i class="el-icon-check"></i>;
            else return <i class="el-icon-close"></i>;
          }
        },
        {
          title: '结算提醒',
          dataIndex: 'balanceTag',
          sorter: true,
          filter: true,
          filterType: 'input',
          align: 'center',
          render: (props, h) => {
            if (props.row.balanceTag == 10041001) return <i class="el-icon-check"></i>;
            else return <i class="el-icon-close"></i>;
          }
        },
        {
          title: '预约提醒',
          dataIndex: 'bookingTag',
          sorter: true,
          filter: true,
          filterType: 'input',
          align: 'center',
          render: (props, h) => {
            if (props.row.bookingTag == 10041001) return <i class="el-icon-check"></i>;
            else return <i class="el-icon-close"></i>;
          }
        },
        {
          title: '车牌号',
          dataIndex: 'license',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          sorter: true,
          filter: true,
          width: 150,
          filterType: 'input'
        },
        {
          title: '发动机号',
          dataIndex: 'engineNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主编号',
          dataIndex: 'ownerNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主',
          dataIndex: 'ownerName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '提示信息',
          dataIndex: 'message',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '开始日期',
          dataIndex: 'beginDate',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '结束日期',
          dataIndex: 'endDate',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        }
        // ,{
        //   title: '操作员',
        //   dataIndex: 'operator',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        // {
        //   title: '建档日期',
        //   dataIndex: 'foundDate',
        //   dateFormat: 'yyyy-MM-dd',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'date-range'
        // }
      ];
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    beforeSave() {
      // debugger;
      if (
        (this.formList[this.findIndex(this.formList, 'repairOrderTag')].initialValue === 10041002 || this.formList[this.findIndex(this.formList, 'repairOrderTag')].initialValue === undefined) &&
        (this.formList[this.findIndex(this.formList, 'bookingTag')].initialValue === 10041002 || this.formList[this.findIndex(this.formList, 'bookingTag')].initialValue === undefined) &&
        (this.formList[this.findIndex(this.formList, 'balanceTag')].initialValue === 10041002 || this.formList[this.findIndex(this.formList, 'balanceTag')].initialValue === undefined)
      ) {
        this.$notify({
          message: '提醒不能都为否',
          type: 'warning'
        });
      } else this.saveDialog();
    },
    async saveDialog() {
      this.$refs.formPanel.SUBMIT_FORM();
      console.log(this.saveData);
      if (!this.saveData.balanceTag) {
        this.saveData.balanceTag = 10041002;
      }
      if (!this.saveData.bookingTag) {
        this.saveData.bookingTag = 10041002;
      }
      if (!this.saveData.repairOrderTag) {
        this.saveData.repairOrderTag = 10041002;
      }
      if (this.saveData !== null) {
        let res = {};
        if (this.type === 'add') {
          res = await addVehicleMonitor(this.saveData);
        }
        if (this.type === 'edit') {
          res = await editVehicleMonitor(this.saveData, this.recordId);
        }
        if (res.resultCode == 200) {
          this.closeDialog('refresh');
          this.$notify({
            message: '保存成功',
            type: 'success'
          });
        }
      }
    },
    searchVehicle() {
      return (
        <el-button
          icon="el-icon-search"
          circle
          onClick={() => {
            this.vehicleInfoVisibie = true;
          }}
        ></el-button>
      );
    },
    showHistory(val) {
      if (this.visible === false) {
        this.fetchParams = {
          license: this.formList[this.findIndex(this.formList, 'license')].initialValue,
          // ownerNo: this.formList[this.findIndex(this.formList, 'ownerNo')].initialValue,
          // ownerName: this.formList[this.findIndex(this.formList, 'ownerName')].initialValue,
          vin: this.formList[this.findIndex(this.formList, 'vin')].initialValue
        };
        this.visible = true;
      }
    },
    closeDialog(param) {
      this.$emit('close', false, param);
    },
    setOwnerInfo(arr) {
      // console.log(arr);
      this.btn1 = false;
      // this.formList[0].initialValue = arr[0].license;
      // this.formList[1].initialValue = arr[0].vin;
      this.formList.find(item => item.fieldName === 'license').initialValue = arr[0].license;
      this.formList.find(item => item.fieldName === 'vin').initialValue = arr[0].vin;
      // this.formList[1].initialValue = arr[0].ownerNo;
      // this.formList[3].initialValue = arr[0].ownerName;
    }
  }
};
</script>

<style lang="less" scoped></style>
